<template> 
    <baidu-map class="map" :zoom="15">
      <bm-local-search keyword="餐馆" :nearby="nearby" :auto-viewport="true" :panel="false" @searchcomplet="handleSearchComplete"></bm-local-search>
      <bm-circle :center="nearby.center" :radius="nearby.radius"></bm-circle>
    </baidu-map>
    <div>搜索到的餐馆总数: {{ totalRestaurants }}</div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        nearby: {
          center: {
            lng: 116.404, 
            lat: 39.915
          },
          radius: 1000
        },
        totalRestaurants: 0
      }
    },
    methods: {
        handleSearchComplete({ results }) {
        console.log(results);
      }
    }
  }
  </script>
  
  <style>
  .map {
    width: 600px;
    height: 600px;
  }
  </style>